{{define "permission/edit.tmpl"}} {{template "app/header.tmpl" .}}
<script type="text/javascript" src="/public/statics/lib/loading/okLoading.js"></script>
</head>

<body>
    <div class="ok-body">
        <!--form表单-->
        <form class="layui-form ok-form" lay-filter="filter">

            <div class="layui-form-item">
                <label class="layui-form-label">父级权限</label>
                <div class="layui-input-block">
                    <div id="permissionTree"></div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">权限名称</label>
                <div class="layui-input-block">
                    <input type="hidden" name="id">
                    <input type="text" name="title" placeholder="角色名称" autocomplete="off" class="layui-input" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">权限路径</label>
                <div class="layui-input-block">
                    <input type="text" name="href" placeholder="权限路径" autocomplete="off" class="layui-input" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">排序</label>
                <div class="layui-input-block">
                    <input type="text" name="sort" placeholder="排序" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">类型</label>
                <div class="layui-input-block">
                    <input type="radio" name="isMenu" value="1" title="菜单">
                    <input type="radio" name="isMenu" value="2" title="按钮">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="" class="layui-form-label">默认图标</label>
                <div class="layui-input-block">
                    <input type="text" id="iconPicker" name="icon" lay-filter="iconPicker" class="hide">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="add">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
    {{template "app/footer.tmpl" .}}
    <script type="text/javascript">
        let initData = JSON.parse("{{.permission}}");

        layui.use(["form", "jquery", "layer", "xmSelect", "iconHhys", "okUtils"], function() {
            let form = layui.form;
            let xmSelect = layui.xmSelect;
            let layer = layui.layer;
            let okUtils = layui.okUtils;
            let iconHhys = layui.iconHhys;
            let $ = layui.jquery;



            iconHhys.render({
                // 选择器，推荐使用input
                elem: '#iconPicker',
                // 数据类型：fontClass/unicode，推荐使用fontClass
                type: 'unicode',
                // 是否开启搜索：true/false，默认true
                search: true,
                // 是否开启分页：true/false，默认true
                page: false,
                value: initData.icon,

                url: '/public/statics/lib/fonts/iconfont.json',

            });

            okLoading.close($);

            okUtils.ajax("/admin/permission/permissionRoleTree", "post", null, true).done(function(response) {
                var data = [{
                    "title": "顶级权限",
                    id: "0",
                    "spread": true,
                    "children": response.data
                }];
                recursiveFunction(data, initData.pId)

                xmSelect.render({
                    data: data,
                    el: '#permissionTree',
                    name: "pId",
                    layVerify: 'required',
                    layVerType: 'msg',
                    autoRow: true,
                    prop: {
                        name: 'title',
                        value: 'id',
                    },
                    radio: true,
                    clickClose: true,
                    tree: {
                        show: true,
                        showFolderIcon: true,
                        showLine: true,
                        indent: 20,
                        strict: false,
                        expandedKeys: [-3],
                    },
                    height: 'auto',
                    click: function(obj) {
                        var data = obj.data;
                    }
                });
            }).fail(function(error) {
                layer.msg("网络错误", {
                    icon: 5
                })
            });


            form.val("filter", initData);

            form.on("submit(add)", function(data) {
                // TODO 权限节点校验

                // 请求后台

                if (data.field.icon.indexOf("layui-icon-") > -1) {
                    data.field.fontFamily = "layui-icon";
                } else {
                    data.field.fontFamily = "ok-icon";
                }

                okUtils.ajax("/admin/permission/edit", "put", data.field, true).done(function(response) {
                    if (response.code == 0) {
                        layer.msg(response.msg, {
                            icon: 1,
                            time: 1000
                        }, function() {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));
                        })
                    } else {
                        layer.msg(response.msg, {
                            icon: 5
                        })
                    }

                }).fail(function(error) {
                    layer.msg("网络错误", {
                        icon: 5
                    })
                });
                return false;
            });

            function recursiveFunction(data, pid) {

                const getStr = function(list) {
                    list.forEach(function(row) {
                        if (row.children) {
                            if (row.id == pid) {
                                row.selected = true
                                return
                            }
                            getStr(row.children)
                        } else {
                            if (row.id == pid) {
                                row.selected = true

                            }

                        }
                    })
                }
                getStr(data)
            }


        })
    </script>


</body>

</html>
{{end}}